<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>日期和日期选择器</title>
  <script src="./js/jexcel.js"></script>
  <script src="./js/jsuites.js"></script>
  <link rel="stylesheet" href="./css/jsuites.css" type="text/css" />
  <link rel="stylesheet" href="./css/jexcel.css" type="text/css" />
</head>

<body>
  <h1>日期和日期选择器</h1>
  <p>下面的示例显示了如何使用和自定义特殊日历列类型。</p>
  <div id="spreadsheet"></div>
</body>
<script>
  var data = [
    ['Flag Fen', 'South East', '2019-01-01'],
    ['Bristol Aero Collection (BAC)', 'South West', '2019-04-03'],
    ['Experience Barnsley', 'North', '2018-12-03'],
    ['Cinema Museum', 'London', ''],
    ['University of Hertfordshire Art Collection', 'South East', ''],
    ['LUX London', 'London', '2016-11-03'],
  ];

  jspreadsheet(document.getElementById('spreadsheet'), {
    data: data,
    columns: [
      {
        type: 'text',
        title: 'Museum',
        width: '300',
      },
      {
        type: 'dropdown',
        title: 'Region',
        source: ['South East', 'South West', 'North', 'London'],
        width: '200',
      },
      {
        type: 'calendar',
        title: 'Last visit',
        options: { format: 'DD/MM/YYYY' },
        width: '100',
      },
    ]
  });

  // 2、日期列自定义
  let options = {
    // Date format
    format: 'DD/MM/YYYY',
    // Allow keyboard date entry
    readonly: 0,
    // Today is default
    today: 0,
    // Show timepicker
    time: 0,
    // Show the reset button
    resetButton: true,
    // Placeholder
    placeholder: '',
    // Translations can be done here
    months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    weekdays_short: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
    // Value
    value: null,
    // Events
    onclose: null,
    onchange: null,
    // Fullscreen (this is automatic set for screensize < 800)
    fullscreen: false,
  };
</script>

</html>